﻿<template>
  <div class="magic-double-col-block">
    <div
      v-for="(item, index) in list.slice(0,1)"
      :key="item._id"
      class="left-block"
      :style="{
        'margin-right': getMarginRight(index),
        'background': `url( ${item.image ? item.image : defaultImg } ) no-repeat`
      }"
    >
      <img
        :id="'img_' + item._id"
        class="img-double-col-style"
        :style="{ 'box-shadow': getBoxShadow, 'border-radius': getRadius }"
        :src="item.image ? item.image : defaultImg"
        @click="navigateTo(item)"
        @load="loadImage(item)"
      />
      <a
        v-for="area in item.hotAreaList"
        :id="'a' + '_' + item._id + '_' + area._id"
        :key="area._id"
        class="hot-area-block"
        @click="navigateTo(area)"
      ></a>
    </div>

    <div
      class="magic-column"
      :style="{
        'margin-left': getMarginLeft(),
      }"
    >
      <div
        v-for="(item, index) in list.slice(1,3)"
        :key="item._id"
        class="right-child-block"
        :style="{
          'margin-top': getMarginTop(index),
          'margin-bottom': getMarginBottom(index),
          'background': `url( ${item.image ? item.image : defaultImg } ) no-repeat`
        }"
      >
        <img
          :id="'img_' + item._id"
          class="img-double-col-style"
          :style="{ 'box-shadow': getBoxShadow, 'border-radius': getRadius }"
          :src="item.image ? item.image : defaultImg"
          @click="navigateTo(item)"
          @load="loadImage(item)"
        />
        <a
          v-for="area in item.hotAreaList"
          :id="'a' + '_' + item._id + '_' + area._id"
          :key="area._id"
          class="hot-area-block"
          @click="navigateTo(area)"
        ></a>
      </div>
    </div>
  </div>
</template>
<script>

import MixIn from '../../MixIn/index'
export default {
  name: 'DoubleCol',
  mixins: [MixIn],
  methods: {
    getMarginRight () {
      if (this.pageData.imageGutter < 2) {
        return this.pageData.imageGutter + 'px'
      }
      return this.pageData.imageGutter / 2 + 'px'
    },
    getMarginLeft () {
      if (this.pageData.imageGutter < 2) {
        return 0
      }
      return this.pageData.imageGutter / 2 + 'px'
    },
    getMarginTop (index) {
      if (index === 0) {
        return 0
      }
      if (this.pageData.imageGutter > 0) {
        return this.pageData.imageGutter / 2 + 'px'
      } else {
        return 0
      }
    },
    getMarginBottom (index) {
      if (index > 0) {
        return 0
      }
      if (this.pageData.imageGutter > 0) {
        return this.pageData.imageGutter / 2 + 'px'
      } else {
        return 0
      }
    }
  }
}
</script>

<style lang="less" scoped>
.magic-double-col-block {
  display: flex;
  img {
    display: block;
    opacity: 0;
  }
  .img-double-col-style {
    width: 100%;
    height: 100%;
  }

  .left-block {
    margin-bottom: 0px;
    flex-grow: 1;
    display: block;

    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .right-child-block {
    margin-bottom: 0px;
    flex-grow: 1;

    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  .magic-column {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
  }

  .hot-area-block {
    position: absolute;
    display: block;
  }
}
</style>
